import React, { memo, useCallback } from "react";
import PropTypes from "prop-types";
import { ThemeCoverWrapper as SongCoverWrapper } from "./style";
const Songs = memo(function (props) {
  const { info } = props;
  const getCount = useCallback((count) => {
    if (!count) {
      return;
    } else if (count < 10000) {
      return count;
    } else if (count / 10000 < 10000) {
      return Math.floor(count / 1000) / 10 + "万";
    } else if (count / 10000 > 10000) {
      return Math.floor(count / 10000000) / 10 + "亿";
    }
  }, []);
  const setImgSize = useCallback((url, size) => {
    return `${url}?param=${size}*${size}`;
  }, []);
  return (
    <SongCoverWrapper>
      <div className="cover-top">
        <img src={setImgSize(info.picUrl, 140)} alt="" />
        <div className="cover sprite_covor">
          <div className="info sprite_covor">
            <span>
              <i className="sprite_icon erji"></i>
              {getCount(info.playCount, 140)}
            </span>
            <i className="sprite_icon play"></i>
          </div>
        </div>
      </div>
      <div className="cover-bottom text-nowrap">{info.name}</div>
      <div className="cover-source">
        by {info.copywriter || info.creator.nickname}
      </div>
    </SongCoverWrapper>
  );
});
Songs.propTypes = {
  info: PropTypes.object.isRequired,
};
Songs.defaultProps = {
  info: [],
};

export default Songs;
